<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="<%=path %>/layui/css/layui.css">
  <link rel="stylesheet" href="<%=path %>/layui/css/lxq.css">
	<script type="text/javascript" src="<%=path %>/layui/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="<%=path %>/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path %>/layui/echarts.min.js" charset="utf-8"></script>
</head>
<body>
<div class="lxq-body">
	<div class="layui-row lxq-address">
		位置：表格管理>表格列表
		<hr>
	</div>
	<div class="layui-row">
	<div id="main" style="width: 600px;height:400px;"></div>
	</div>
	<div id="charts"></div>
	

</div>              
          

 



 <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
		option = {
		    title : {
		        text: '填写情况',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: ['未填写','已填写']
		    },
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:[
		                {value:${noOver}, name:'未填写'},
		                {value:${over}, name:'已填写'}
		            ],
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
 
<script type="text/javascript">
$(document).ready(function(){
	  $.ajax({
			type:"post",
			url:"<%=basePath%>/biz/Chart_getChartData",
			data:{id : ${form.id}},
			success: function(data){
				var charts = document.getElementById("charts");
				for(var i=0;i<data.length;i++){
					//创建新div,设置div大小
					var newDiv = document.createElement("div");
					newDiv.style.width = "600px";
					newDiv.style.height = "400px";
					//将新div插入页面
					charts.appendChild(newDiv);
					//根据div创建图表对象
					var myChart = echarts.init(newDiv);
					//设置表格参数
					
					//将表格参数置入图表对象
					myChart.setOption(getOption(data[i]));
					
				}
			}
	  });
	  
	  
  
	  function getOption(chart){
			option = {
				    title : {
				        text: chart.text,
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        left: 'left',
				        data: chart.legendData
				    },
				    series : [
				        {
				            name: chart.name,
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:chart.cdList,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				};
			return option;
		}
		
		
	
	
});


</script>
</body>
</html>